<script setup>
import { ref } from 'vue'
let arr = [
  {
    id: '12987122',
    name: '张三',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    name: '张三',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: '张三',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: '李四',
    amount1: '621',
    amount2: '2.2',
    amount3: 17,
  },
  {
    id: '12987126',
    name: '李四',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
  {
    id: '12987122',
    name: '王五',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    name: '赵六',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: '赵六',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: '赵六',
    amount1: '621',
    amount2: '2.2',
    amount3: 17,
  },
  {
    id: '12987126',
    name: '赵六',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  }
]
const tableData = ref(arr)

/**
 * 合并单元行/列表 返回数组形式
 * @param row
 * @param column
 * @param rowIndex
 * @param columnIndex
 * @returns {number[]} 返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan(rowspan为多少行一起合并 colspan为多少列一起合并)
 */
const arraySpanMethod = ({row, column, rowIndex, columnIndex}) => {
  if (columnIndex === 1) {
    // 想要以第二列属性为目标进行合并 则和该列属性相同的行则被隐藏
    if (rowIndex < 3) {
      // 每一个分组的第一个开始 下面相同的则隐藏
      if (rowIndex == 0) {
        return [3, 1]
      } else  {
        // 分组的非第一个则隐藏
        return [0, 0]
      }
    } else {
      // 其他索引的 维持原样 一行一列
      return [1, 1]
    }
  }
}

/**
 * 合并单元行/列表 返回对象形式
 * @param row
 * @param column
 * @param rowIndex
 * @param columnIndex
 */
const objSpanMethod = ({row, column, rowIndex, columnIndex}) => {
  if (rowIndex % 2 === 0) {
    // 偶数行
    if (columnIndex === 0) {
      // 第一列
      // 返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan(rowspan为多少行一起合并 colspan为多少列一起合并)
      // 下面的例子：合并期望是针对偶数索引行 一行两列合并
      return {
        rowspan:0,
        colspan:2
      }
    } else if (columnIndex === 1) {
      return {
        rowspan:0,
        colspan:0
      }
    }
  }
}

/**
 * 合并单元行通用方法 核心思想：想针对哪一列 往下跨几行 就对该列特殊处理 （同理：若合并单元列 则针对那一行特殊处理）
 * @param row 列表行对象数据源
 * @param column 表格列信息
 * @param rowIndex 行索引
 * @param columnIndex 列索引
 * @returns {{colspan: number, rowspan: number}}
 */
const genderSpanRow = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex == 0) {
    console.log("column：", column)
  }
  if (columnIndex === 0) {
    // 获取当前单元格的值
    const currentValue = row.name;
    // 获取上一行相同列的值
    const preRow = rowIndex == 0 ? null : tableData.value[rowIndex - 1];
    const preValue = preRow ? preRow.name : null;
    // 如果当前值和上一行的值相同，则将当前单元格隐藏
    console.log('currentValue:', currentValue, 'preValue:', preValue)
    if (currentValue === preValue) {
      // 相当于同一个分组下 非第一个元素
      return { rowspan: 0, colspan: 0 };
    } else {
      // 核心：否则计算当前单元格应该跨越多少行 默认1行
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableData.value.length; i++) {
        const nextRow = tableData.value[i];
        const nextValue = nextRow.name;
        if (nextValue == currentValue) {
          rowspan ++;
        } else {
          break;
        }
      }
      return { rowspan, colspan: 1 };
    }
  }
}

/**
 * 合并单元列通用方法 核心思想：想针对哪一行 往前跨几列 就对该行特殊处理 （同理：若合并单元行 则针对某一列特殊处理）
 * @param row 列表行对象数据源
 * @param column 表格列信息
 * @param rowIndex 行索引
 * @param columnIndex 列索引
 * @returns {{colspan: number, rowspan: number}}
 */
const genderSpanColum = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex == 0) {
    if (columnIndex == 2) {
      return {
        rowspan:1,
        colspan:3
      }
    } else if (columnIndex > 2) {
      // 同一行 同一个分组 非第一个元素 隐藏
      return {
        rowspan:0,
        colspan:0
      }
    }
  }
}

</script>

<template>
  <page-view>
    <h1>合并单元行列：注意合并时 同一分组内 第一个设置，其他的要隐藏(rowspan:0, colspan:0)</h1>
    <div>合并单元行:以目标列为准，计算需要跨几行为一组；每个分组的第一个设置rowspan=x(跨几行，代表该几行为一个分组),colspan=1;同一分组其他行则隐藏rowspan=0,colspan=0</div>
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        :span-method="genderSpanRow"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" sortable label="Amount 1" />
      <el-table-column prop="amount2" sortable label="Amount 2" />
      <el-table-column prop="amount3" sortable label="Amount 3" />
    </el-table>

    <el-divider />
    <div>合并单元列</div>
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        :span-method="genderSpanColum"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" sortable label="Amount 1" />
      <el-table-column prop="amount2" sortable label="Amount 2" />
      <el-table-column prop="amount3" sortable label="Amount 3" />
    </el-table>
  </page-view>
</template>

<script>
export default {
  name: "WorkCellMerge",
  components: {},
}
</script>

<style scoped>

</style>
